<template>
	<!-- 面板内容 -->
	<div class="content-center">

		<div class="content-container border-box">
			<div class="content-breadcrumb">
				<el-breadcrumb separator="/" class="breadcrumb">
					<el-breadcrumb-item class="home-font">首页</el-breadcrumb-item>
					<el-breadcrumb-item>项目基本信息</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div data-v-5d89fbf1="" class="audit-content">
				<div data-v-5d89fbf1="" class="centent-title"><span data-v-5d89fbf1="" class="fl">项目基本信息</span><span class="fr title-right">知识管理系统</span></div>
				<div class="centent-inner border-box">
					<div class="messageTop">
						<div class="messageCon clearfix">
							<div class="selectDivleft">
								<span class="messageTitfont">项目名称:</span>
								<span class="fontDiv">2019年北京市部分小企业信贷业务审计调查</span>
							</div>
							<div class="selectDivright clearfix">
								<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed">
									<el-button type="primary" class="messageBtn">从系统引入资料</el-button>
								</el-upload>
								<el-button type="primary" class="messageBtn" @click="centerDialogVisible = true">刷新审计按钮</el-button>

							</div>
						</div>
						<div class="messageCon clearfix">
							<div class="selectDivleft">
								<span class="messageTitfont">审计组:</span>
								<el-select class="messageSelect" v-model="value" placeholder="请选择">
									<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</div>
							<div class="fontDiv">
								<span class="messageTitfont">项目类型:</span>
								<span class="fontDiv">地方审计工作</span>
							</div>
						</div>
						<div class="messageContext clearfix">
							<div class="selectDivleft">
								<span class="messageTitfont">项目编号:</span>
								<span class="fontDiv">A2019-4657-284783</span>
							</div>
							<div class="selectDivleft">
								<span class="messageTitfont">人员信息:</span>
								<span class="fontDiv">组长-常毛毛；副组长-张策策；主审-胡国瑞</span>
							</div>

						</div>
					</div>
					<div class="messageBot clearfix">
						<div class="botLeft">
							<span class="botLeft-tit">方案信息</span>
							<div class="message-tree-left">
								<el-tree :data="dataTreeLeft" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
							</div>
						</div>
						<div class="botRight">
							<span class="botRight-tit">资料树信息</span>
							<div class="message-tree-right">
								<el-tree :data="dataTreeRight" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
							</div>
						</div>
					</div>
					<!--弹窗-->
					<div class="centerDialogVisibleTC">
						<el-dialog title="从资料树选择资料" :visible.sync="centerDialogVisible" width="44.5%" center>
							<div class="message-box">
								<div class="message-tree-alert-one">
									<el-tree :data="dataTreeAlert" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
								</div>
								<div class="message-tree-alert-two">
									<el-tree :data="dataTreeAlert" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
								</div>
							</div>
							<div slot="footer" class="dialog-footer clearfix" style="display: flex;">
		          				<el-button class="btn btn-primary alert-btn chearfix" style="margin: 0 auto;" >确定</el-button>
								<el-button class="btn btn-default alert-btn" @click="centerDialogVisible = false">取消</el-button>
							</div>
						</el-dialog>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>
<script>
	// import { getService  } from "@/api";
	// import Bus from "../../utils/eventBus.js";
	import axios from "axios";

	export default {
		components: {},
		data() {
			return {
				menudata:{
					// 菜单box的样式   Menu box style
					boxStyle:"width:150px;background:#f55;",
					// 菜单选项的样式 Style of menu options
					optionStyle:"color:#fff;line-height:30px;font-size:15px;",
					menus:[
						{
							/**
							 * content 菜单显示的文字 <支持html>
							 * callback：菜单点击要触发函数  需要在methods定义
							 * style ： 本项菜单的单独样式 可以覆盖掉optionStyle
							 * icon : icon图片地址
							 * iconStyle: icon 图片的样式（例如大小等 直接作用于图片）
							 * iconPosition : 支持left / right (其余全部按照left处理);
							 * content The text displayed on the menu(can use html)
							 * callback: Menu clicks to trigger functions need to be defined in methods
							 * style :  The single style of this menu can override option Style
							 * icon : your icon's url
							 * iconStyle : you icon's style ,is image's style
							 * iconPosition :you can use left or right ;The rest are all processed according to left
							 */
							/**
							 * 字段(field)           类型(type)                 是否可以为空(is can null)    默认值
							 * content            [ html | text ]                       Y                   ""
							 * callback           [  methods function ]                 Y                   return false
							 * style                   [ css ]                          Y                   ""
							 * icon                   [ url ]                           Y                   ""
							 * iconStyle              [ css ]                           Y                   ""
							 * iconPosition           [string]                          Y                   "left"
							 */
							content:"menu content",
							callback:"callbackMethods",
							style:"border-bottom:1px solid #fff;background:#333;line-height:30px;",
							icon:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2310514390,3580363630&fm=27&gp=0.jpg",
							iconStyle:"width:20px;height:20px;",
							iconPosition:"left",
						},
						{
							content:"右键菜单二",
							callback:"otherMethods"
						}
					],
				},
				centerDialogVisible: false, //弹窗-会计核算标准接口数据采集
				options: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				value: '222',
				// 当前时间
				nowTime: "",
				dataTreeLeft: [{
					label: '方案1.1预算编制和批复',
					children: [{
						label: '方案1.1.1预算编制不细化',
					}]
				}, {
					label: '方案1.2预算收入执行',
					children: [{
						label: '方案1.2.1指标下达不及时',
					}, {
						label: '方案1.2.2指出拨付不及时',
					}]
				}, {
					label: '方案1.3预算结余',
					children: [{
						label: '方案1.3.1收入支出科目',
					}]
				}],
				dataTreeRight: [{
					label: '某同志任期经济责任审计 ',
					children: [{
						label: '准备阶段',
						children: [{
							label: '审计工作方案',
						}, {
							label: '审计通知书',
						}, {
							label: '审计证据',
						}, {
							label: '重要事项管理记录',
						}, {
							label: '其他资料',
						}]
					}, {
						label: '实施阶段',
					}, {
						label: '报告阶段',
					}, {
						label: '整改阶段',
					}]
				}],
				dataTreeAlert: [{
					label: '某同志任期经济责任审计 ',
					children: [{
						label: '准备阶段',
						children: [{
							label: '审计工作方案',
						}, {
							label: '审计通知书',
						}, {
							label: '审计证据',
						}, {
							label: '重要事项管理记录',
						}, {
							label: '其他资料',
						}]
					}, {
						label: '实施阶段',
						children: [{
							label: '',
						}]
					}, {
						label: '报告阶段',
						children: [{
							label: '',
						}]
					}, {
						label: '整改阶段',
						children: [{
							label: '',
						}]
					}]
				}],
				dataTreeAlerttwo: [{
					label: '某同志任期经济责任审计 ',
					children: [{
						label: '准备阶段',
						children: [{
							label: '审计工作方案',
						}, {
							label: '审计通知书',
						}, {
							label: '审计证据',
						}, {
							label: '重要事项管理记录',
						}, {
							label: '其他资料',
						}]
					}, {
						label: '实施阶段',
						children: [{
							label: '',
						}]
					}, {
						label: '报告阶段',
						children: [{
							label: '',
						}]
					}, {
						label: '整改阶段',
						children: [{
							label: '',
						}]
					}]
				}],
				defaultProps: '',
				fileList: [{ name: 'food.jpeg', url: '' }, { name: '' }]
			};

		},
		computed: {},
		mounted() {},
		created() {},
		methods: {
			// 获取列表
			async getService(k = {}) {
				const res = await getService(k);
				console.log(res) // if (res.status == 200) {	//     console.log(res)
				// }
			},
			callbackMethods(){
				// do something
				console.log(11111)
			},
			otherMethods(){
				console.log(2222)
				// do something
			},
			handleNodeClick(data) {
				console.log(data);
			},
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			},
			handleExceed(files, fileList) {
				this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			},
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${ file.name }？`);
			},
		}
	}

	;
</script>

<style lang="less" scoped>


	.content-center {
		width: 100%;
		.content-container {
			/*height: calc( 100% - 40px);*/
			height:100% ;
			padding: 0 20px 20px 20px;
			overflow-y: auto;
		}
		.centent-inner {
			height: 100%;
		}
	}
	
	/deep/.audit-content {
		overflow-y: hidden;
	}
	
	.upload-demo {
		width: 114px;
		height: 32px;
		float: right;
	}
	
	.content-panel {
		width: 100%;
	}
	
	.messageCon {
		width: 100%;
		height: 32px;
		margin-top: 20px;
	}
	
	.messageSelect {
		float: left;
		width: 310px;
		height: 32px;
	}
	
	/deep/ .el-input__inner {
		background: #FFFFFF;
		border: 1px solid #D2D2D2;
		border-radius: 5px;
		height: 32px;
		line-height: 32px;
	}
	
	/deep/ .el-input__icon {
		line-height: 32px;
	}
	
	.messageTitfont {
		float: left;
		width: 100px;
		height: 32px;
		line-height: 32px;
		font-family: PingFangSC-Regular;
		font-size: 16px;
		color: #333333;
		letter-spacing: 0;
		text-align: right;
		padding-right: 5px;
	}
	
	.selectDivleft {
		width: 418px;
		height: 32px;
		float: left;
	}
	
	.messageTop {
		height: 170px;
		padding-right: 20px;
	}
	
	.messageBtn {
		font-family: PingFangSC-Regular;
		font-size: 12px;
		color: #FFFFFF;
		background: #6C8AB6;
		border: 1px solid #6C8AB6;
		border-radius: 5px;
		float: right;
		margin-left: 10px;
		height: 32px;
		line-height: 32px;
		padding: 0 20px;
	}
	
	.fontDiv {
		font-family: PingFangSC-Regular;
		font-size: 16px;
		color: #333333;
		letter-spacing: 0;
		height: 32px;
		line-height: 32px;
		float: left;
	}
	
	.messageContext {
		width: 100%;
		/*height: 32px;*/
		padding-top: 20px;
	}
	
	.messageSpan1 {
		font-family: PingFangSC-Regular;
		font-size: 16px;
		color: #333333;
		letter-spacing: 0;
		display: block;
		width: 418px;
		height: 32px;
	}
	
	.messageSpan2 {
		font-family: PingFangSC-Regular;
		font-size: 16px;
		color: #333333;
		letter-spacing: 0;
		margin-left: 184px;
	}
	
	.messageBot {
		height: 671px;
		padding: 20px;
	}
	
	.botLeft {
		width: 48%;
		height: 631px;
		border-radius: 6px;
		border: 1px solid #CCCCCC;
		float: left;
		margin-right: 20px;
	}
	
	.botRight {
		width: 48%;
		height: 631px;
		border-radius: 6px;
		border: 1px solid #CCCCCC;
		float: right;
	}
	
	.botLeft-tit {
		display: block;
		height: 32px;
		background: #ccd0d7;
		border-radius: 6px 6px 0 0;
		font-family: PingFangSC-Medium;
		font-size: 16px;
		color: #455F85;
		letter-spacing: 0;
		line-height: 32px;
		padding-left: 20px;
	}
	
	.botRight-tit {
		display: block;
		height: 32px;
		background: #ccd0d7;
		border-radius: 6px 6px 0 0;
		font-family: PingFangSC-Medium;
		font-size: 16px;
		color: #455F85;
		letter-spacing: 0;
		line-height: 32px;
		padding-left: 20px;
	}
	
	.selectDivright {
		width: 300px;
		height: 32px;
		float: right;
		padding-right: 20px;
	}
	
	.message-tree-left {
		padding: 20px;
	}
	
	.message-tree-right {
		padding: 20px;
	}
	
	.botRight-font {
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #333333;
	}
	
	& /deep/ .el-tree-node__label {
		color: #333333;
	}
	
	& /deep/ .is-leaf {
		color: transparent;
		visibility: hidden;
	}
	
	& /deep/ .el-icon-caret-right:before {
		content: "\e6dc";
		color: #333333;
	}
	
	&/deep/ .el-message-box__header {
		text-align: center;
		background: red;
	}
	
	&/deep/ .el-message-box {
		width: auto;
	}
	
	.message-box {
		height: 398px;
		text-align: center;
	}
	
	&/deep/ .el-message-box__title {
		text-align: center;
		background: red;
	}
	
	.title-right {
		padding-right: 20px;
		font-size: 14px;
		color: #455F85;
		text-decoration: underline;
		cursor: pointer;
	}
	
	&/deep/ .el-tree-node {
		color: red;
		.is-expanded {
			color: #ffffff;
		}
	}
	
	/deep/ .el-tree-node:focus>.el-tree-node__content {
		background-color: #6c8ab6;
		border-radius: 4px;
		color: red;
		.el-tree-node__label {
			color: #fff;
		}
		.el-icon-caret-right:before {
			color: #fff;
		}
	}
	
	/deep/ .message-tree-right:last-child>.el-tree:first-child>.el-tree-node:first-child>.el-tree-node__content:first-child>.el-icon-caret-right:before {
		content: "\e784";
	}
	
	/deep/ .message-tree-alert-one:first-child>.el-tree:first-child>.el-tree-node:first-child>.el-tree-node__content:first-child>.el-icon-caret-right:before {
		content: "\e784";
	}
	
	/deep/ .message-tree-alert-two:last-child>.el-tree:first-child>.el-tree-node:first-child>.el-tree-node__content:first-child>.el-icon-caret-right:before {
		content: "\e784";
	}
	
	/deep/ .el-tree:first-child>.el-tree-node:first-child>.el-tree-node__content:first-child>.expanded {
		transform: rotate(0deg)
	}
	.alert-btn{
		width: 176px;
		height: 52px;
		font-size: 20px;
		text-align: center;
		margin: 0 auto;
	}
</style>